﻿
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style type="text/css">
    .table_search td {
        padding-right: 10px;
    }
</style>
<form class="layui-form">
    <table class="table_search">
        <tr>
            <td>日期:</td>
            <td>
                <input type="text" class="layui-input" id="txtSearchDate" maxlength="10"
                       style="width: 100px;" readonly="readonly" placeholder="yyyy-MM-dd" />
            </td>
            <td>买家:</td>
            <td>
                <input type="text" class="layui-input" id="txtSearchBuyer" maxlength="10"
                       style="width: 80px;" />
            </td>
            <td>卖家:</td>
            <td>
                <input type="text" class="layui-input" id="txtSearchSeller" maxlength="10"
                       style="width: 80px;" />
            </td>
            <td>订单号:</td>
            <td>
                <input type="text" class="layui-input" id="txtSearchOrderNo" maxlength="20"
                       style="width: 180px;" />
            </td>
            <td>订单状态:</td>
            <td>
                <div style="width: 100px;">
                    <select id="selSearchOrderStatus">
                        <option value="" selected="selected">请选择</option>
                    </select>
                </div>
            </td>
            <td>
                <button type="button" id="btnSearch" class="layui-btn layui-btn-normal">
                    <i class="layui-icon layui-icon-search"></i>查 询
                </button>
            </td>
        </tr>
    </table>
</form>

<style type="text/css">
    OrderTableContainer .layui-table-cell {
        height: 42px;
    }
</style>
<div style="margin-top: 10px;" id="OrderTableContainer">
    <table class="layui-hide" id="OrderTable" lay-filter="filter-table-order"></table>
</div>
<script type="text/html" id="ToolBar-OrderTable">
    <a class="layui-btn layui-btn-sm layui-bg-blue" lay-event="viewPaymentInfo" style="margin-left:2px;">付款信息</a>
</script>

<script type="text/html" id="ViewPaymentInfoDlg">
    <div class="layui-carousel">
        <div carousel-item>
        </div>
    </div>
</script>

<script type="text/javascript">
    layui.use(["layer", "jquery", "table", "form", "tree", "laydate", "dropdown"], function () {
        var layer = layui.layer;
        var $ = layui.jquery;
        var table = layui.table;
        var form = layui.form;
        var tree = layui.tree;
        var laydate = layui.laydate;
        var dropdown = layui.dropdown;
        var carousel = layui.carousel;

        $(document).ready(function () {
            $("#btnSearch").click(function () {
                reloadTable();
            });
        });

        laydate.render({
            elem: '#txtSearchDate',
            value: "2024-02-28",
            isInitValue: true,
            showBottom: false
        });

        tool.getOrderStatusArr().forEach(item => {
            var obj = { title: item["text"], id: item["value"] };
            var option = new Option(item["text"], item["value"]);
            $("#selSearchOrderStatus").append(option);
        });
        form.render("select");

        function reloadTable() {
            table.reloadData("OrderTable", {
                where: getTableQueryParam()
            });
        }

        table.render({
            elem: "#OrderTable",
            url: "/Order/List",
            height: "full-69", // (10 + 38 + 10 + 10 + 1)
            page: false,
            method: "POST",
            where: getTableQueryParam(),
            even: true,
            totalRow: true,
            parseData: function (res) {
                //console.log(res);
                return {
                    "code": res.Success == true ? 0 : -1,
                    "msg": res.Msg,
                    "count": res.Count,
                    "data": res.Data,
                    "totalRow": {
                        "count": res.Data.length
                    }
                };
            },
            cols: [[
                {
                    type: 'numbers', title: 'No.', width: 60, fixed: 'center'
                    , totalRow: '{{= d.TOTAL_ROW.count }}'}
                , {
                    field: "OrderNo", width: 200, align: "center", title: "订单号"}
                , { field: "ProductName", width: 90, align: "center", title: "产品名称" }
                , { field: "Buyer", width: 80, align: "center", title: "买家" }
                , { field: "Amount", width: 100, align: "center", title: "金额", totalRow: true }
                , { field: "Seller", width: 80, align: "center", title: "卖家" }
                , { field: "Time", width: 180, align: "center", title: "下单时间" }
                , {
                    field: "State", width: 80, align: "center", title: "状态", templet: function (d) {
                        //console.log(d);
                        var text = tool.getOrderStatusTextByValue(d.State);
                        var color = "";
                        if (d.State == tool.EOrderStatus.Unpaid) {
                            color = "color: red;";
                        }else if (d.State == tool.EOrderStatus.Paid
                            || d.State == tool.EOrderStatus.RecvPayment) {
                            color = "color: green;";
                        } else if (d.State == tool.EOrderStatus.Fetch) {
                            color = "color: #cbc90a;";
                        }
                        return '<span style="' + color + '">' + text + '</span>';
                    }
                }
                , { align: "center", title: "操作", toolbar: "#ToolBar-OrderTable" }
            ]]
        });

        table.on("tool(filter-table-order)", function (obj) {
            var layEvent = obj.event;
            if (layEvent == "viewPaymentInfo") {
                onViewPaymentInfoHandle(obj);
            }
        });

        function getTableQueryParam() {
            return {
                OrderNo: $("#txtSearchOrderNo").val().trim(),
                Date: $("#txtSearchDate").val().trim(),
                Buyer: $("#txtSearchBuyer").val().trim(),
                Seller: $("#txtSearchSeller").val().trim(),
                State: $("#selSearchOrderStatus").val()
            };
        }

        function onViewPaymentInfoHandle(obj) {
            var data = obj.data;
            var layEvent = obj.event;
            var tr = obj.tr;

            layer.open({
                type: 1,
                title: "满堂创品",
                shade: [0.1, '#000'],
                skin: 'layui-layer-molv',
                offset: "0%",
                area: ["350px", "100%"],
                resize: false,
                content: '<div id="ViewPaymentInfoDlg2">' + $("#ViewPaymentInfoDlg").html() + '</div>'
            });

            if (data.PaymentVoucherImagePath != "") {
                var el = $("#ViewPaymentInfoDlg2 > div").eq(0);
                var el2 = $("#ViewPaymentInfoDlg2 > div > div").eq(0);
                var width = $("#ViewPaymentInfoDlg2").parent().width();
                var height = $("#ViewPaymentInfoDlg2").parent().height();
                var arr = data.PaymentVoucherImagePath.split(",");
                var html = '';
                arr.forEach(item => {
                    html += '<div><img style="width: ' + width + 'px; height: ' + height + 'px;" src="http://47.96.8.175' + item + '"></div>';

                });
                el2.append(html);

                if (arr != null && arr.length > 0) {
                    carousel.render({
                        elem: el,
                        width: width + "px",
                        height: height + "px",
                        interval: 3000
                    });
                }
            }
        }

        function addStyle(str) {
            return '<span style="font-size: 16px;">' + str + '</span>';
        }
    });
</script>
